import { Graph } from "@antv/x6";
import { DagreLayout } from "@antv/layout";

const data = {
  nodes: [],
  edges: [],
};
let maxLen = 1300;
for (let i = 1; i <= maxLen; i++) {
  data.nodes.push({
    id: i + "",
    shape: "rect",
    width: 60,
    height: 30,
    label: i,
    attrs: {
      body: {
        fill: "#855af2",
        stroke: "transparent",
      },
      label: {
        fill: "#ffffff",
      },
    },
  });
  if (i + 1 < maxLen) {
    data.edges.push({
      source: i + "",
      target: i + 1 + "",
      attrs: {
        line: {
          stroke: "#fd6d6f",
          strokeWidth: 1,
        },
      },
    });
  }
}

function initGraph() {
  const t1 = new Date().getTime();
  const graph = new Graph({
    container: document.getElementById("dag-container"),
    grid: true,
  });

  const dagreLayout = new DagreLayout({
    type: "dagre",
    rankdir: "LR",
    align: "UR",
    ranksep: 30,
    nodesep: 15,
    controlPoints: true,
  });
  const model = dagreLayout.layout(data);

  graph.fromJSON(model);
  console.log("耗时：", new Date().getTime() - t1);
}
export { initGraph };
